<template>
<view class="scroll-view">
    <scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
        <view class="cu-item" :class="index==TabCur?'text-green cur':''" v-for="(item,index) in navList" :key="index" @tap="tabSelect" :data-id="index">
            {{item.text}}
        </view>
    </scroll-view>
</view>
</template>

<script>
export default {
    name: "ScrollviEw",
    data() {
        return {
            TabCur: 0,
            scrollLeft: 0,
            navList: [{
                    text: '推荐',
                    id: 'ALL'
                },
                {
                    text: '转卖',
                    id: 'Resell'
                },
                {
                    text: '求购',
                    id: 'toBuy'
                },
                {
                    text: '原料',
                    id: 'rawMaterial'
                },
                {
                    text: '纱线',
                    id: 'yarn'
                },
                {
                    text: '面料',
                    id: 'Fabric'
                },
                {
                    text: '成衣',
                    id: 'clothes'
                },
                {
                    text: '机械',
                    id: 'Mechanics'
                },
                {
                    text: '外贸',
                    id: 'foreignTrade'
                },
                {
                    text: '硬件',
                    id: 'Hardware'
                },
                {
                    text: '软件',
                    id: 'Software'
                }
            ],
        };
    },
    created(){
        console.log(this.navList)
    },
    methods: {
        tabSelect(e) {
            this.TabCur = e.currentTarget.dataset.id;
            this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
        }
    }
}
</script>

<style>
.scroll-view{
    border-top: 20upx solid #eee;
}
</style>
